<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首都医科大学附属小学</title>
		<meta name="description" content="首都医科大学附属小学（原右安门第一小学），学校地处南二环，西邻丽泽商务区，东临北京南站，位于开阳里社区中心。" />
		<meta name="keywords" content="右安门一小 右安门 首都医科大学附属小学 北京 一小  右安门 和文化 教育" /><meta name="author" content="say"/>
		<link rel="shortcut icon" href="../static/images/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="../static/font/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/student.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/theme-green.css"/>
		<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript" src="../static/js/main.js" ></script>
		<style>
			.form1 ul li input{
				width:400px;
			}
			.form1 ul li .tips{

			color: rgba(0, 0, 0, 0.5);

			padding-left: 10px;
	
			}
	
			.tips_true,.tips_false{
	
				padding-left: 10px;
	
			}
	
			.tips_true{
	
				color: #38b03f;
	
			}
	
			.tips_false{
	
				color: red;
	
			}
		</style>
	</head>
	<body>
		<div class="header-top-fixed">
			<div class="w1080">
				<ul class="top-navbar">
					<li><a href="#">门户网站</a></li>
					<li><a href="#">德育信息</a></li>
					<li><a href="#">七彩少年</a></li>
					<li><a href="#">和雅教师</a></li>
					<li><a href="#">微课学习</a></li>
					<li><a href="#">微探交流</a></li>
				</ul>
				<ul class="navbar-right">
					<li><a href="#">返回首页</a></li>
					<li><a href="#">退出</a></li>
				</ul>
			</div>
		</div>
				<div class="tpq"></div>
		<div class="header">
			<div class="user-div">
				<img src="../static/images/users.jpg"/>
			</div>
			<div class="header-con">
				<h2>首医附小学生空间</h2>
				<div class=" user-msg">
					<a href="#">
						<span id="">
							李彩优
						</span>
					</a>
					<div class="fenshu">
						<a href="#" class="jifen">
							<i></i>
							积分
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
						</a>
						<a href="#" class="xunz">
							<i></i>
							勋章 
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
						</a>
					</div>
					<div class="clear"></div>
					<div class="header-navbar">
						<ul>
							<li><a href="#">个人中心</a></li>
							<li><a href="#">个人空间</a></li>
							<li class="active"><a href="#">德育信息</a></li>
							<li><a href="#">微课学习</a></li>
							<li><a href="#">微探交流</a></li>
							<li><a href="#">艺术与鉴赏</a></li>
							<li><a href="#">社团活动</a></li>
							<li><a href="#">更多</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="point-div stu-d">
				<ul>
					<li>
						<a href="#">
							<i class="fa fa-lg fa-bell"></i>
							<span id="">
								11
							</span>
						</a>
						<span id="">
							消息
						</span>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-lg fa-commenting"></i>
							<span id="">
								23
							</span>
						</a>
						<span id="">
							评论
						</span>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-lg fa-heart"></i>
						</a>
						<span id="">
							收藏
						</span>
					</li>
					<a href="#" class="exit" ><i class="fa fa-lg fa-power-off"></i>  退出</a>
				</ul>
			</div>
		</div>
		<div class="containter">
			<div class="sider">
				<div class="con-div sider-div">
					<div class="sider-top">
						德育信息
					</div>
					<div class="sider-con zhandian">
						<ul>
							<li><a href="#"><i class="icon icon-dangan "></i>查看德育细则</a></li>
							<li><a href="#"><i class="icon icon-dangan "></i>课上评价</a></li>
							<li><a href="#"><i class="icon icon-dangan "></i>课下评价</a></li>
							<li class="actived"><a href="#"><i class="icon icon-dangan "></i>我的评价记录</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="content content-lg">
				<div class="main-div con-div">
					<div class="main-top">
						<ul class="tab-btn">
							<li class="top-seclect"> <a href="#">Tab标签</a></li>
						</ul>
					</div>
					<div class="con-list">
						<div class="dynamic loglist">
							<h3 class="demo-title">表单提示验证</h3>
							
							<form name="form1" method="post" class="formg form1">

								<ul>
					
									<li>
					
										<label>姓名：</label>
					
										<input type="text" name="yourname" placeholder="请输入用户名"  onblur="checkna()" required disabled/><span class="tips" id="divname" disabled>长度1~12个字符</span>
					
									</li>
					
									<li>
					
										<label>密码：</label>
					
										<input type="password" name="yourpass" placeholder="请输入你的密码" onblur="checkpsd1()" required/><span class="tips" id="divpassword1">密码必须由字母和数字组成</span>
					
									</li>
					
									<li>
					
										<label>确认密码：</label>
					
										<input type="password" name="yourpass2" placeholder="请再次输入你的密码" onblur="checkpsd2()" required/><span class="tips" id="divpassword2">两次密码需要相同</span>
					
									</li>
					
									<li>
					
										<label>电子邮箱：</label>
					
										<input type="text" name="youremail" placeholder="请输入你的邮箱" onblur="checkmail()" required/><span class="tips" id="divmail"></span>
					
									</li>
								</ul>
								<button class="btn btn-striped"  type="submit">保存</button><button class="btn btn-cancel" type="reset">取消</button>
					
							</form>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		<div class="clear"></div>
		</div>
		<div class="footer"> 
			<p>© 2015-2016 DHHC 版权所有</p>
		  	<p>版权号</p>
		</div>
		<script type="text/javascript">

	    function checkna(){

			na=form1.yourname.value;

		  	if( na.length <1 || na.length >12)  

	  		{  	

	  			divname.innerHTML='<font class="tips_false">长度是1~12个字符</font>';

	  		     

	  		}else{  

	  		    divname.innerHTML='<font class="tips_true">输入正确</font>';

	  		   

	  		}  

	  	

	  }

	  //验证密码 

		function checkpsd1(){    

			psd1=form1.yourpass.value;  

			var flagZM=false ;

			var flagSZ=false ; 

			var flagQT=false ;

			if(psd1.length<6 || psd1.length>12){   

				divpassword1.innerHTML='<font class="tips_false">长度错误</font>';

			}else

				{   

				  for(i=0;i < psd1.length;i++)   

					{    

						if((psd1.charAt(i) >= 'A' && psd1.charAt(i)<='Z') || (psd1.charAt(i)>='a' && psd1.charAt(i)<='z')) 

						{   

							flagZM=true;

						}

						else if(psd1.charAt(i)>='0' && psd1.charAt(i)<='9')    

						{ 

							flagSZ=true;

						}else    

						{ 

							flagQT=true;

						}   

					}   

					if(!flagZM||!flagSZ||flagQT){

					divpassword1.innerHTML='<font class="tips_false">密码必须是字母数字的组合</font>'; 

					 

					}else{

						

					divpassword1.innerHTML='<font class="tips_true">输入正确</font>';

					 

					}  

				 

				}	

		}

		//验证确认密码 

		function checkpsd2(){ 

				if(form1.yourpass.value!=form1.yourpass2.value) { 

				     divpassword2.innerHTML='<font class="tips_false">您两次输入的密码不一样</font>';

				} else { 

				     divpassword2.innerHTML='<font class="tips_true">输入正确</font>';

				}

		}

		//验证邮箱

		

		function checkmail(){

					apos=form1.youremail.value.indexOf("@");

					dotpos=form1.youremail.value.lastIndexOf(".");

					if (apos<1||dotpos-apos<2) 

					  {

					  	divmail.innerHTML='<font class="tips_false">输入错误</font>' ;

					  }

					else {

						divmail.innerHTML='<font class="tips_true">输入正确</font>' ;

					}
		}
  		</script>
		
		<!--<script type="text/javascript" src="../static/js/jquery.select.js"></script>-->
	</body>
</html>
